<template>
    <div class="linel">
        <div id="linel" class="" style="width:90%;height:450px"></div>
    </div>
</template>
<script>
// import echarts from "echarts/lib/echarts"; 
// import "echarts/lib/chart/bar";           //引入柱状图
// import "echarts/lib/chart/line";          //引入折线图
// import "echarts/lib/component/title";   // 引入提示框组件、标题组件、工具箱组件。
// import "echarts/lib/component/legend";
// import "echarts/lib/component/toolbox";
// import "echarts/lib/component/markPoint";
// import "echarts/lib/component/tooltip";

//vuecli脚手架也支持  node 中的模块化  common 规范   一般写代码用ES6的模块化( import )
var echarts=require("echarts/lib/echarts");             //引入 echarts 主模块 
            require("echarts/lib/chart/bar");           //引入柱状图
            require("echarts/lib/chart/line");           //引入折线图
            require("echarts/lib/chart/pie");           //引入饼状图
            require("echarts/lib/component/title");     //引入柱状图
            require("echarts/lib/component/legend");   // 引入提示框组件、标题组件、工具箱组件。
            require("echarts/lib/component/toolbox");   
            require("echarts/lib/component/markPoint");     
            require("echarts/lib/component/tooltip");   
   export default {
        name:'echarts',
        methods:{
            initData(){
                const option={
                    title: {
                        text: 'ECharts 入门示例'
                    },
                    tooltip: {},
                    xAxis: {
                        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                    },
                    yAxis: {},
                    series: [{
                        name: '销量',
                        type: 'pie',
                        data: [5, 20, 36, 10, 10, 20]
                    }]
                }
                this.myChart.setOption(option);
            }
        },
        mounted(){
            this.myChart=echarts.init(document.getElementById("linel"));
            this.initData();
        },
        data() {
            return {

            };
        },
   };
</script>
<style lang="scss" scoped>
.linel{
    display: flex;
    justify-content: center;
    background: gainsboro;
}
</style>